<template>
    <el-aside>
      <el-scrollbar>
     <el-menu router unique-opened  :collapse="isCollapse">
      <a href="/" class="logo">
        <img src="../assets/2.jpg"/>
        <h1>康氏商铺</h1>
      </a>
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
        <span>
          商品管理
        </span>
        </template>
        <el-menu-item index="/one" >
          <el-icon>
          <IEpSetting/>
        </el-icon>
        <span>
          普通用户商品
        </span>
        </el-menu-item>
        <el-menu-item index="/2" :disabled="isvip">
          <el-icon>
          <IEpSetting/>
        </el-icon>
        <span>
          vip用户商品
        </span>
        </el-menu-item>
      </el-submenu>


      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-s-tools"></i>
        <span>
          用户管理
        </span>
        </template>
        <el-menu-item index="/qianbao">
        <i class="el-icon-s-tools"></i>
        <span>
          钱包
        </span>
        </el-menu-item>
        <el-menu-item index="/4">
          <el-icon>
          <IEpSetting/>
        </el-icon>
        <span>
          历史订单
        </span>
        </el-menu-item>
      </el-submenu>
      <el-menu-item index="/vip">
        <i class="el-icon-s-tools"></i>
        <span>
          开通VIP
        </span>
        </el-menu-item>
        <el-menu-item index="/car">
        <i class="el-icon-s-tools"></i>
        <span>
          购物车
        </span>
        </el-menu-item>
     </el-menu>
    </el-scrollbar>
  </el-aside>
</template>
<script>
import bus from '../js/bus';
  export default {
    name: "aside",
    props:['father'],
    data() {
      return{
         isCollapse:this.father,
          isvip:true
        }
    },
    mounted(){
      bus.$on('fold',data =>{
        this.isCollapse=data
      })
    }
  }
  </script>

  <style scoped lang="less">
  .el-aside{
    background-color: #eee;
    height: 100vh;
    width:auto
  }
  .el-menu{
    border-right: none;
    background-color: #eee;
    width: 200px;
    &.el-menu--collapse{
      width: 60px;
      & h1{
      display: none;}
    }
  }

  .logo{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    text-decoration: none;
    color: black;
  }
  .logo img{
     width: 32px;
     height: 32px;
  }
  </style>
